<template>
	<view class="notification-container">
		<view class="tabs">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				:class="['tab-item', currentTab === index ? 'active' : '']"
				@click="switchTab(index)"
			>
				<text>{{tab.name}}</text>
				<text class="badge" v-if="tab.count > 0">{{tab.count}}</text>
			</view>
		</view>

		<view class="notification-list">
			<view 
				v-for="(item, index) in filteredNotifications" 
				:key="index"
				:class="['notification-item', item.read ? 'read' : '']"
				@click="handleNotificationClick(item)"
			>
				<view class="notification-icon">
					<uni-icons :type="item.icon" size="24" :color="item.color"></uni-icons>
				</view>
				<view class="notification-content">
					<view class="notification-title">{{item.title}}</view>
					<view class="notification-desc">{{item.description}}</view>
					<view class="notification-time">{{item.time}}</view>
				</view>
				<view class="notification-status" v-if="!item.read"></view>
			</view>
		</view>

		<view class="empty-state" v-if="filteredNotifications.length === 0">
			<image src="/static/empty-notification.png" mode="aspectFit"></image>
			<text>暂无{{tabs[currentTab].name}}</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			tabs: [
				{ name: '全部', count: 0 },
				{ name: '系统', count: 2 },
				{ name: '设备', count: 3 },
				{ name: '场景', count: 1 }
			],
			notifications: [
				{
					id: 1,
					type: 'system',
					icon: 'info',
					color: '#007AFF',
					title: '系统更新提醒',
					description: '新版本v2.0.0已发布，包含多项功能优化和bug修复',
					time: '10分钟前',
					read: false
				},
				{
					id: 2,
					type: 'device',
					icon: 'gear',
					color: '#07C160',
					title: '设备异常提醒',
					description: '您的设备"智能空调"出现异常，请及时检查',
					time: '30分钟前',
					read: false
				},
				{
					id: 3,
					type: 'scene',
					icon: 'star',
					color: '#FFB700',
					title: '场景执行成功',
					description: '您的"回家模式"场景已成功执行',
					time: '1小时前',
					read: true
				}
			]
		}
	},
	computed: {
		filteredNotifications() {
			if (this.currentTab === 0) {
				return this.notifications
			}
			const types = ['all', 'system', 'device', 'scene']
			return this.notifications.filter(item => item.type === types[this.currentTab])
		}
	},
	methods: {
		switchTab(index) {
			this.currentTab = index
		},
		handleNotificationClick(item) {
			if (!item.read) {
				item.read = true
				this.updateNotificationCount()
			}
			// 根据通知类型处理不同的跳转逻辑
			switch(item.type) {
				case 'system':
					uni.navigateTo({
						url: '/pages/system/update'
					})
					break
				case 'device':
					uni.navigateTo({
						url: '/pages/device/detail?id=' + item.id
					})
					break
				case 'scene':
					uni.navigateTo({
						url: '/pages/scene/detail?id=' + item.id
					})
					break
			}
		},
		updateNotificationCount() {
			// 更新未读消息数量
			this.tabs[0].count = this.notifications.filter(item => !item.read).length
			this.tabs[1].count = this.notifications.filter(item => !item.read && item.type === 'system').length
			this.tabs[2].count = this.notifications.filter(item => !item.read && item.type === 'device').length
			this.tabs[3].count = this.notifications.filter(item => !item.read && item.type === 'scene').length
		}
	},
	onLoad() {
		this.updateNotificationCount()
	}
}
</script>

<style lang="scss">
.notification-container {
	min-height: 100vh;
	background: #f6f7f9;
	
	.tabs {
		display: flex;
		background: #ffffff;
		padding: 20rpx;
		position: sticky;
		top: 0;
		z-index: 100;
		
		.tab-item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;
			color: #666;
			position: relative;
			padding: 20rpx 0;
			
			&.active {
				color: #007AFF;
				font-weight: 600;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #007AFF;
					border-radius: 2rpx;
				}
			}
			
			.badge {
				position: absolute;
				top: 10rpx;
				right: 20%;
				background: #ff4d4f;
				color: #fff;
				font-size: 20rpx;
				padding: 2rpx 12rpx;
				border-radius: 20rpx;
			}
		}
	}
	
	.notification-list {
		padding: 20rpx;
		
		.notification-item {
			display: flex;
			background: #ffffff;
			padding: 30rpx;
			border-radius: 24rpx;
			margin-bottom: 20rpx;
			position: relative;
			
			&.read {
				opacity: 0.6;
				
				.notification-title {
					color: #999;
				}
			}
			
			.notification-icon {
				margin-right: 20rpx;
			}
			
			.notification-content {
				flex: 1;
				
				.notification-title {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 10rpx;
				}
				
				.notification-desc {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 10rpx;
				}
				
				.notification-time {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.notification-status {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 16rpx;
				height: 16rpx;
				background: #ff4d4f;
				border-radius: 50%;
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 100rpx 0;
		
		image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 20rpx;
		}
		
		text {
			font-size: 28rpx;
			color: #999;
		}
	}
}
</style> 